<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link rel="stylesheet" href="./css/example.css" />
        <script src="./libs/layui/layui.js"></script>
        <link rel="stylesheet" href="./libs/layui/css/layui.css" />
        <title>numberInput - 数字输入框</title>
    </head>

    <body>
        <div class="board">
            <h1 class="title">效果展示</h1>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-label">原版输入框</div>
                    <div class="layui-input-block">
                        <input type="text" placeholder="输入框" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">默认空值</div>
                    <div class="layui-input-block">
                        <input type="text" placeholder="设置值" class="layui-input" id="emptyValue" data-default-value="" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">排序号</div>
                    <div class="layui-input-block">
                        <input type="text" placeholder="序号" class="layui-input" id="sort" data-default-value="10" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">金额录入</div>
                    <div class="layui-input-block">
                        <input type="text" placeholder="金额" class="layui-input" id="price" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">订单数量</div>
                    <div class="layui-input-block">
                        <input type="text" placeholder="数量" class="layui-input" id="total" />
                    </div>
                </div>
            </div>
        </div>
        <script>
            layui
                .config({
                    base: "./libs/layui_exts/",
                })
                .extend({
                    numberInput: "numberInput/js/index",
                });

            layui.use(["numberInput", "layer"], function () {
                var numberInput = layui.numberInput;
                var layer = layui.layer;

                numberInput.render("#emptyValue",{
                    defaultEmptyValue: true,
                    allowEmpty: true,
                    min: 0,
                    max: 100,
                    step: 1
                });

                numberInput.render("#sort", {
                    // 最小值
                    min: -10,
                    // 最大值
                    max: 10,
                    // 步数
                    step: 2,
                    // 所有的事件都需要写到 event 下面
                    event: {
                        beforeCreated() {
                            console.log("生命周期: beforeCreated", "插件开始工作啦!");
                        },
                        created($tree) {
                            console.log("生命周期: created", "插件已经创建好DOM了! 但是还没塞到页面上, 可以理解成现在是虚拟的DOM", $tree);
                        },
                        mounted($tree) {
                            console.log("生命周期: mounted", "创建的DOM已经替换掉原始的DOM了, 撸起袖子就是干", $tree);
                        },
                        change(event, $input, value, $tree) {
                            console.log("事件: change", "数据改变", {
                                event,
                                $input,
                                value,
                                $tree,
                            });
                        },
                        input(event, $input, value, $tree) {
                            console.log("事件: input", "数据输入", {
                                event,
                                $input,
                                value,
                                $tree,
                            });
                        },
                        blur(event, $input, value, $tree) {
                            console.log("事件: blur", "失去焦点", {
                                event,
                                $input,
                                value,
                                $tree,
                            });
                        },
                        toMin(event, $subtract, value, $tree) {
                            console.log("事件: toMin", "到达最小值", {
                                event,
                                $subtract,
                                value,
                                $tree,
                            });
                        },
                        toMax(event, $add, value, $tree) {
                            console.log("事件: toMax", "到达最大值", {
                                event,
                                $add,
                                value,
                                $tree,
                            });
                        },
                        focus(event, $input, value, $tree) {
                            console.log("事件: focus", "获得焦点", {
                                event,
                                $input,
                                value,
                                $tree,
                            });
                        },
                        select(event, $input, value, $tree) {
                            console.log("事件: select", "当全选的时候", {
                                event,
                                $input,
                                value,
                                $tree,
                            });
                        },
                        keypress(event, $input, value, $tree) {
                            console.log("事件: keypress", "当按下某个键的时候", {
                                event,
                                $input,
                                value,
                                $tree,
                            });
                        },
                        mousewheel(event, $input, value, $tree) {
                            console.log("事件: mousewheel", "当鼠标滚轮滚动的时候", {
                                event,
                                $input,
                                value,
                                $tree,
                            });
                        },
                    },
                });

                numberInput.render("#total", {
                    min: 0,
                    max: 10,
                });

                numberInput.render("#price", {
                    autoSelcet: false,
                    max: 1000,
                    min: 0,
                    precision: 2,
                });
            });
        </script>
    </body>
</html>
